<template>
  <div class="home">
    <div class="header">
      这个是头部
    </div>
    <div class="canner">
     <div>
      
      <dl>
        <dt><img src={item.img} alt=""></dt>
        <dd>
          <h3>{item.name}</h3>
        </dd>
      </dl>
     </div>
    </div>
    <div class="footer">
      <div v-for="(item,index) in fooTab " :key="index" @lick="(item.title)"></div>
      <div class="footer_mm">阅读</div>
      <div class="footer_xz">下载</div>
      <div class="footer_fz">分组</div>
      <div class="footer_tj">添加</div>
      <div class="footer_yc">移除</div>
    </div>
  </div>
</template>

<script>
export default {
  name:'home',
  components:{},
  data(){
    return {
      fooTab:[
        {
            path: '/home',
            name: 'Home',
            title: '页面',
        },
        {
            path: '/shop',
            name: 'Shop',
            title: '购物车',
        },
        {
            path: '/list',
            name: 'List',
            title: '列表',
        },
        {
            path: '/my',
            name: 'My',
            title: '我的',
        },
      ]
    }
  }
}


</script>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
html,body,#app{
    width: 100%;
    height: 100%;
}
.home{
    width: 100%;
    height: 100%;
}
.header{
    height: 50px;
    border-bottom: 2px solid pink;
}
.canner{
    height: 560px;
    border-bottom: 2px solid pink;
}
.footer{
    height: 50px;
    display: flex;
}
</style>